<template>
	<ui-sys img="../../static/question/explanationTop.png">
		<view class="questionDetail">
			<ui-navbar back opacity>
				<view class="p-2 flex-bar flex-sub" v-if="sys_scrollTop > sys_navBar">
					<text class="text-lg cicon-back  " @tap="navigateBack()">返回</text>
				</view>
				<view class="p-2 flex-bar flex-sub" v-else>
					<text class="text-lg cicon-back  text-white" @tap="navigateBack()"></text>
				</view>
				<view class="flex-bar">
					<!-- #ifdef MP -->
					<view :style="{width:`${sys_capsule.width + 10}px`,height:`${sys_capsule.height}px`}">
						<view> 12</view>
					</view>
					<!-- #endif -->
				</view>
			</ui-navbar>

			<view class="top">
				<view class="title">
					{{ detailData.title || "" }}
				</view>
				<view class="info">
					<view class="tags">
						<view class="tag" v-for="tag in detailData.simpleTagVOS" :key="tag.id">{{tag.name}}</view>
					</view>
					<view class="browse">
						<image src="../../static/question/eyes.png"></image>
						<view class="content">{{ detailData.viewCounts || "0" }}人已浏览</view>
					</view>
				</view>
			</view>

			<view class="main">
				<ui-tab :tab="['解答']" tpl="trapezoid" style="height:80rpx; margin-top: 40rpx;">
				</ui-tab>
				<scroll-view :scroll-y="true" class="scroll-Y" show-scrollbar style="height: 60vh"
					v-if="explanations.length > 0">
					<view class="itemCard" v-for="explanation in explanations" :key="explanation.eid">
						<view class="itemCardTop" @click="toUserInfo(explanation.userVO.uid)" v-if="explanation.userVO">
							<image class="headPicture" :src="explanation.userVO.avatarUrl" mode="scaleToFill"></image>
							<view class="nickname">{{explanation.userVO.nickName}}</view>
						</view>
						<view class="itemBody" @click="toExplanation(explanation.eid)">
							<!-- 可能有图片 -->
							<view class="images">
								<image v-for="(img,index) in explanation.coverUrls" :key='index' :src="img"
									mode="scaleToFill"></image>
							</view>
							<view class="itemMain">
								{{ explanation.des }}
							</view>
						</view>
					</view>
				</scroll-view>

				<template v-else>
					<view class="ui-BG radius">
						<ui-title class="mt-3" title="快来做第一个解答人吧" titleColor="text-red" descColor="text-orange" desc="Let's be the first one" tpl="center-column" hasLine></ui-title>
					</view>
					 
				</template>
			</view>
			<!-- 操作栏 -->
			<view class="bottom">
				<!-- 写题解 -->
				<template v-if="!explanationIDBySelf">
					<button class="ui-btn block bg-blue shadow shadow-blue" @click="toWirteQuestion()">写题解</button>
				</template>
				<!-- 查看自己的题解 -->
				<template v-else>
					<button class="ui-btn block bg-blue shadow shadow-blue" @click="toWirteQuestion()">查看自己的题解</button>
				</template>
			</view>


		</view>


	</ui-sys>
</template>

<script>
	import {
		userInfoRequest
	} from '@/api/login.js';

	import {
		explainsByUidRequest,
		questionsByUidRequest,
		explainsByQidRequest,
		questionByQidRequest
	} from '@/api/question.js'
	import {
		getStorageUserInfo
	} from '@/utils/storageUtils.js';


	export default {
		data() {
			return {
				// 是否写过题解
				explanationIDBySelf: false,
				// 问题信息
				detailData: {},
				// 解答者列表
				explanations: []
			};
		},
		onLoad(e) { 
			console.log(e)
			this.getExplains(e.id)
			this.getQuestion(e.id)
		},
		methods: {
			
			getQuestion(id) {
				console.log(id)
				const param = {
				    'qid':id
				}
				questionByQidRequest(param).then(res => {
					if (res.code == 200) {
						this.detailData = res.data
						console.log('qByQid', res.data)
					} else {
						this.$Tips(res.msg);
					}
				})
			},
			getExplains(id) {
				const param = {
					'qid':id
				}
				explainsByQidRequest(param).then(res => {
					if (res.code == 200) {
						console.log('esByQid', res.data)
						this.explanations = res.data
					} else {
						this.$Tips(res.msg);
					}
				})

			},
			// 返回
			navigateBack() {
				uni.navigateBack();
			},
			// 跳转用户页面
			toUserInfo(id) {
				uni.navigateTo({
					url: `/pages/my/info?userID=${id}`,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			toExplanation(id) {
				uni.navigateTo({
					url: `/pages/question/explanation?eid=${id}`,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			// 区修改题解或 添加题解
			toWirteQuestion() {
				uni.navigateTo({
					url: `/pages/question/writeQuestion?qid=${this.detailData.qid}&uid=${getStorageUserInfo().uid}&explanationIDBySelf=${this.explanationIDBySelf}`,
					animationType: 'pop-in',
					animationDuration: 200
				});
			}


		}
	}
</script>

<style lang="scss">
	@import "../../utils/common.scss";

	.questionDetail {
		height: 96vh;
		overflow-y: hidden;

		.top {
			display: inline-block;
			position: relative;
			width: 100%;
			min-height: 306rpx;
			padding-bottom: 90rpx;
			background: linear-gradient(360deg, #809bf5 0%, #506be6 100%);

			.title {
				width: 666rpx;
				margin: 0 auto;
				font-size: 32rpx;
				color: #fff;
				margin-top: 42rpx;
				@include text-ellipsis(2);
			}

			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 666rpx;
				margin: 0 auto;
				margin-top: 20rpx;

				.tags {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.tag {
						color: #fff;
						font-size: 24rpx;
						background: linear-gradient(270deg, #ffd398 0%, #ffa85f 100%);
						border-radius: 2px;
						padding: 2rpx 16rpx;
					}

					.tag:not(:last-child) {
						margin-right: 16rpx;
					}
				}

				.browse {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 34rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}

					.content {
						font-size: 24rpx;
						color: #fff;
					}
				}
			}
		}

		.main {
			display: inline-block;
			width: 100%;
			background: #ffffff;
			border-radius: 25px 25px 0px 0px;
			transform: translateY(-64rpx);

		}



		.itemCard {
			width: 95%;
			padding: 30rpx;
			box-shadow: 0px 3px 10px 0px rgba(97, 108, 150, 0.2);
			border-radius: 8px;
			margin: 0 auto;
			margin-top: 20rpx;

			&:not(:first-child) {
				border-top: 2rpx solid #f1f3fc;
			}

			&:last-child {
				margin-bottom: 20rpx;
			}

			.itemCardTop {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.headPicture {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					border: 2px solid #fff;
				}

				.nickname {
					font-size: 28rpx;
					margin-left: 16rpx;
				}
			}

			.itemBody {
				.images {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: 20rpx;

					image {
						width: 216rpx;
						height: 162rpx;
						border-radius: 15rpx;

						&:not(:first-child) {
							margin-left: 22rpx;
						}
					}
				}

				.itemMain {
					color: #666666;
					font-size: 28rpx;
					margin-top: 20rpx;
				}
			}
		}

		.bottom {
			width: 690rpx;
			height: 98rpx;
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
